Angular এর স্থাপত্য

Web Development - অ্যাঙ্গুলার (Angular)

774

Angular একটি Component-Based Framework যা বিভিন্ন অংশের সমন্বয়ে তৈরি। এই স্থাপত্য অ্যাপ্লিকেশনকে মডুলার, স্কেলেবল এবং পুনঃব্যবহারযোগ্য করে তোলে। Angular এর প্রতিটি অ্যাপ্লিকেশন মূলত Modules, Components, Templates, Directives, Services, এবং Dependency Injection এর উপর ভিত্তি করে কাজ করে।

Angular স্থাপত্যের মূল অংশগুলো

1. Modules (NgModules)

Modules হলো Angular অ্যাপ্লিকেশনের স্থাপত্যের ভিত্তি।
প্রতিটি অ্যাপ্লিকেশন অন্তত একটি Root Module নিয়ে শুরু হয়, যাকে সাধারণত AppModule বলা হয়।
বড় অ্যাপ্লিকেশনকে ছোট ছোট মডিউলে ভাগ করা যায়, যেমন: Feature Module, Shared Module।
মডিউলগুলো Angular কম্পোনেন্ট, ডিরেক্টিভ, পাইপ, এবং সার্ভিসকে সংগঠিত করে।

2. Components

Components হলো Angular অ্যাপ্লিকেশনের UI তৈরির মূল উপাদান।
প্রতিটি কম্পোনেন্ট একটি Template এবং Class নিয়ে তৈরি হয়।
কম্পোনেন্ট UI উপস্থাপন করে এবং ডেটা বা লজিক ম্যানেজ করে।

3. Templates

Templates হলো HTML এর একটি অংশ, যা কম্পোনেন্টের ভিজ্যুয়াল লেয়ার তৈরি করে।
এটি ডেটা বাইন্ডিং এবং Angular ডিরেক্টিভ ব্যবহার করে Dynamic UI তৈরিতে সাহায্য করে।

4. Directives

Directives হলো Angular এর DOM (Document Object Model) ম্যানিপুলেশনের জন্য ব্যবহৃত বিশেষ উপাদান।
- Structural Directives: DOM এলিমেন্ট অ্যাড বা রিমুভ করতে ব্যবহৃত হয় (যেমন *ngIf, *ngFor)।
- Attribute Directives: DOM এলিমেন্টের চেহারা বা আচরণ পরিবর্তন করতে ব্যবহৃত হয় (যেমন [ngClass], [ngStyle])।

5. Services এবং Dependency Injection (DI)

Services হলো Angular অ্যাপ্লিকেশনে শেয়ারড ডেটা এবং লজিক ম্যানেজ করার জন্য ব্যবহৃত হয়।
Angular এর Dependency Injection (DI) মডেল এই সার্ভিসগুলো বিভিন্ন কম্পোনেন্ট বা মডিউলে ইনজেক্ট করে।

6. Routing

Angular-এ বিল্ট-ইন Routing Module SPA (Single Page Application) তৈরি করার জন্য ব্যবহৃত হয়।
এটি বিভিন্ন ভিউ বা পেজের মধ্যে নেভিগেশনের জন্য ব্যবহৃত হয়।

7. Pipes

Pipes হলো ডেটা ট্রান্সফর্ম করার জন্য ব্যবহৃত একটি টুল।
উদাহরণ: ডেটা ফরম্যাট করা (date pipe), টেক্সট রূপান্তর (uppercase pipe) ইত্যাদি।

8. Dependency Injection

Angular এর Dependency Injection ফ্রেমওয়ার্ক ক্লাসের মধ্যে নির্ভরতা ম্যানেজ করে।
এটি কোড পুনরায় ব্যবহার এবং টেস্টিং সহজ করে।

Angular স্থাপত্যের কাজের ধারা

User Interaction: ব্যবহারকারী UI এর সাথে ইন্টারঅ্যাক্ট করে। উদাহরণস্বরূপ, একটি বাটনে ক্লিক।
Component: ইন্টারঅ্যাকশনটি কম্পোনেন্টে পৌঁছায়। কম্পোনেন্টের ক্লাস ব্যবহারকারী থেকে ডেটা গ্রহণ করে এবং লজিক প্রয়োগ করে।
Service: কম্পোনেন্ট প্রয়োজনে Service কল করে, যেখানে শেয়ারড ডেটা বা ব্যবসায়িক লজিক থাকে।
Template এবং Data Binding: কম্পোনেন্ট ডেটা ব্যবহার করে Template এর মাধ্যমে UI আপডেট করে। এটি One-way বা Two-way Data Binding এর মাধ্যমে ঘটে।
Directives এবং Pipes: DOM বা ডেটার চেহারা বা আচরণ পরিবর্তনের জন্য Directives এবং Pipes ব্যবহৃত হয়।
Routing: ব্যবহারকারী একটি লিংক ক্লিক করলে Router নির্ধারণ করে কোন ভিউ দেখাতে হবে।

Angular স্থাপত্যের চিত্র

User Interface (UI)
        ↓
Component ↔ Template ↔ Data Binding
        ↓
     Services ↔ Dependency Injection
        ↓
  Modules ↔ Routing ↔ Directives

Angular স্থাপত্যের সুবিধা

মডুলার আর্কিটেকচার: অ্যাপ্লিকেশন ছোট ছোট মডিউলে বিভক্ত হওয়ার ফলে এটি মেইনটেন করা সহজ।
Reusable Components: প্রতিটি UI অংশ পুনরায় ব্যবহারযোগ্য।
Dependency Injection: নির্ভরতা সহজে ম্যানেজ করা যায়।
Scalability: বড় অ্যাপ্লিকেশন তৈরি করার জন্য উপযোগী।
Testability: কোড সহজেই টেস্ট করা যায়।
Performance Optimization: Angular এর AOT Compiler এবং Ivy Renderer অ্যাপ্লিকেশনের পারফরম্যান্স বাড়ায়।

Angular এর স্থাপত্য অ্যাপ্লিকেশনকে গঠনমূলক এবং মডুলার করে, যা ডেভেলপমেন্ট এবং রক্ষণাবেক্ষণ সহজ করে। এটি বড় এবং জটিল প্রজেক্টেও অত্যন্ত কার্যকর।

Content added By

SATT Academy

Angular কম্পোনেন্ট

637

Angular-এ কম্পোনেন্ট হলো একটি মৌলিক বিল্ডিং ব্লক যা অ্যাপ্লিকেশনের UI (User Interface) নির্ধারণ করে। প্রতিটি Angular অ্যাপ্লিকেশন এক বা একাধিক কম্পোনেন্টের সমন্বয়ে গঠিত। কম্পোনেন্ট একটি TypeScript ক্লাস, HTML টেমপ্লেট, এবং CSS স্টাইলশীট নিয়ে কাজ করে।

Angular কম্পোনেন্টের গঠন

একটি কম্পোনেন্ট তিনটি অংশ নিয়ে গঠিত:

TypeScript Class: কম্পোনেন্টের লজিক এবং ডেটা ম্যানেজ করে।
HTML Template: UI বা ভিজ্যুয়াল এলিমেন্টের স্ট্রাকচার নির্দেশ করে।
CSS/SCSS: UI এর স্টাইল এবং লেআউট নির্ধারণ করে।

Angular কম্পোনেন্ট তৈরির ধাপ

Angular CLI ব্যবহার করে কম্পোনেন্ট তৈরি করা খুব সহজ। নিচে ধাপগুলো উল্লেখ করা হলো:

Step 1: নতুন কম্পোনেন্ট তৈরি

Angular CLI ব্যবহার করে নতুন কম্পোনেন্ট তৈরি করতে:

ng generate component component-name

অথবা সংক্ষেপে:

ng g c component-name

এটি একটি নতুন ফোল্ডার তৈরি করবে, যেখানে নিচের ফাইলগুলো থাকবে:

component-name.component.ts (TypeScript ক্লাস)
component-name.component.html (HTML টেমপ্লেট)
component-name.component.css (স্টাইলশীট)
component-name.component.spec.ts (টেস্ট ফাইল)

Step 2: কম্পোনেন্টের কোড বিশ্লেষণ

// component-name.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-component-name', // HTML ট্যাগের নাম
  templateUrl: './component-name.component.html', // HTML টেমপ্লেট
  styleUrls: ['./component-name.component.css'] // স্টাইল ফাইল
})
export class ComponentNameComponent {
  title: string = 'Hello, Angular Component!';
}

Step 3: কম্পোনেন্ট ব্যবহার

তৈরি হওয়া কম্পোনেন্ট ব্যবহার করতে চাইলে এটি app.module.ts ফাইলে ডিক্লেয়ার করতে হবে:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ComponentNameComponent } from './component-name/component-name.component';

@NgModule({
  declarations: [
    AppComponent,
    ComponentNameComponent // নতুন কম্পোনেন্ট ডিক্লেয়ার
  ],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

এরপর, কম্পোনেন্টটি HTML ট্যাগ হিসেবে ব্যবহার করতে পারবেন:

<app-component-name></app-component-name>

Angular কম্পোনেন্টের গুরুত্বপূর্ণ বৈশিষ্ট্য

1. Selector

selector হলো HTML ট্যাগ, যা ব্যবহার করে কম্পোনেন্টকে অ্যাপ্লিকেশনে যোগ করা হয়।
উদাহরণ: <app-component-name></app-component-name>

2. Template এবং TemplateUrl

template অথবা templateUrl দ্বারা কম্পোনেন্টের HTML নির্ধারণ করা হয়।

উদাহরণ:

@Component({
  template: '<h1>Inline Template</h1>'
})

3. StyleUrls এবং Styles

styleUrls বা styles দ্বারা কম্পোনেন্টের স্টাইল নির্ধারণ করা হয়।

উদাহরণ:

@Component({
  styles: ['h1 { color: blue; }']
})

4. Lifecycle Hooks

Angular কম্পোনেন্টে বিভিন্ন লাইফসাইকেল হুক থাকে, যেমন:

ngOnInit(): কম্পোনেন্ট লোড হওয়ার পরপরই চালু হয়।
ngOnDestroy(): কম্পোনেন্ট ধ্বংস হওয়ার আগে চালু হয়।
ngDoCheck(): পরিবর্তন শনাক্ত করার জন্য।

5. Data Binding

Angular কম্পোনেন্টে ডেটা এবং UI এর মধ্যে One-way এবং Two-way Binding করা যায়:

One-way Binding: Data → View
Two-way Binding: Data ↔ View

উদাহরণ: একটি বেসিক কম্পোনেন্ট

// hello-world.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-hello-world',
  template: `<h1>{{ message }}</h1>`,
  styles: [`h1 { color: green; }`]
})
export class HelloWorldComponent {
  message: string = 'Welcome to Angular!';
}

HTML এ এটি ব্যবহার:

<app-hello-world></app-hello-world>

Angular কম্পোনেন্ট অ্যাপ্লিকেশন তৈরিতে একটি কেন্দ্রীয় ভূমিকা পালন করে। এটি কোড পুনরায় ব্যবহারযোগ্য, মডুলার এবং সহজে মেইনটেনযোগ্য করে তোলে।

Content added By

SATT Academy

মডিউল (NgModules)

716

Angular-এ NgModules হলো একটি ফ্রেমওয়ার্ক কাঠামো, যা অ্যাপ্লিকেশনের বিভিন্ন ফিচার এবং ফাংশনালিটি সংগঠিত এবং ম্যানেজ করার জন্য ব্যবহৃত হয়। প্রতিটি Angular অ্যাপ্লিকেশন একটি বা একাধিক NgModules-এ বিভক্ত।

প্রাথমিকভাবে, একটি Angular অ্যাপ্লিকেশন সর্বদা AppModule নামে একটি মূল মডিউল নিয়ে শুরু হয়।

NgModule কী?

NgModule হলো একটি ডেকোরেটর যা একটি ক্লাসকে মডিউল হিসেবে চিহ্নিত করে। এটি Angular অ্যাপ্লিকেশনের কম্পোনেন্ট, ডাইরেক্টিভ, পাইপ, সার্ভিস, এবং অন্যান্য ফিচারগুলিকে সংগঠিত করে এবং মডিউলের মধ্যে নির্ধারণ করে।

NgModule এর মূল গঠন:

import { NgModule } from '@angular/core';

@NgModule({
  declarations: [ /* কম্পোনেন্ট, ডিরেক্টিভ, পাইপ */ ],
  imports: [ /* অন্যান্য মডিউল */ ],
  providers: [ /* সার্ভিস */ ],
  bootstrap: [ /* রুট কম্পোনেন্ট */ ]
})
export class AppModule { }

NgModule এর গুরুত্বপূর্ণ অংশ

1. declarations

এখানে কম্পোনেন্ট, ডিরেক্টিভ, এবং পাইপ ডিক্লেয়ার করা হয় যা এই মডিউলের অন্তর্গত।

উদাহরণ:

declarations: [
  AppComponent,
  HelloWorldComponent
]

2. imports

এখানে অন্য মডিউলগুলো ইমপোর্ট করা হয়, যাতে সেগুলোর ফিচার এই মডিউলে ব্যবহার করা যায়।

উদাহরণ:

imports: [
  BrowserModule,
  FormsModule
]

3. providers

এখানে সার্ভিস ডিফাইন করা হয়, যা এই মডিউলের ভেতর ইনজেকশন (Dependency Injection) এর জন্য ব্যবহৃত হয়।
উদাহরণ:
```
providers: [
  MyService
]
```

4. bootstrap

এটি মূলত রুট কম্পোনেন্টকে নির্দেশ করে, যা অ্যাপ্লিকেশন শুরু হওয়ার সময় লোড হয়।
উদাহরণ:
```
bootstrap: [
  AppComponent
]
```

AppModule: একটি মৌলিক উদাহরণ

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HelloWorldComponent } from './hello-world/hello-world.component';

@NgModule({
  declarations: [
    AppComponent,
    HelloWorldComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Angular এর মধ্যে মডিউল প্রকারভেদ

1. Root Module

প্রতিটি Angular অ্যাপ্লিকেশনে একটি Root Module থাকে, যা সাধারণত AppModule নামে পরিচিত।
এটি অ্যাপ্লিকেশনের প্রাথমিক কম্পোনেন্ট এবং মডিউলগুলোকে লোড করে।

2. Feature Module

বড় অ্যাপ্লিকেশনে বিভিন্ন ফিচার আলাদা মডিউলে বিভক্ত করা হয়।
উদাহরণ: UserModule, AdminModule ইত্যাদি।

3. Shared Module

এমন মডিউল যেখানে সাধারণভাবে ব্যবহারযোগ্য কম্পোনেন্ট, ডাইরেক্টিভ, পাইপ, এবং সার্ভিস রাখা হয়।
উদাহরণ: SharedModule।

4. Core Module

এমন মডিউল যেখানে সার্ভিস এবং অ্যাপ্লিকেশনের জন্য গুরুত্বপূর্ণ কার্যক্রম রাখা হয়।

একটি Feature Module উদাহরণ

Step 1: নতুন মডিউল তৈরি

Angular CLI ব্যবহার করে নতুন মডিউল তৈরি করতে:

ng generate module user

Step 2: মডিউলের গঠন

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UserComponent } from './user.component';

@NgModule({
  declarations: [
    UserComponent
  ],
  imports: [
    CommonModule
  ],
  exports: [
    UserComponent
  ]
})
export class UserModule { }

Step 3: Root Module এ Import করা

AppModule এ UserModule ইমপোর্ট করতে হবে:

import { UserModule } from './user/user.module';

@NgModule({
  imports: [
    BrowserModule,
    UserModule
  ]
})
export class AppModule { }

NgModule এর সুবিধা

মডুলার আর্কিটেকচার: বড় অ্যাপ্লিকেশন ছোট ছোট অংশে বিভক্ত করা যায়।
কোড পুনঃব্যবহার: Shared Module এর মাধ্যমে কোড পুনরায় ব্যবহার করা সহজ।
ডিপেনডেন্সি ম্যানেজমেন্ট: সার্ভিস এবং ফিচারগুলোর নির্ভরতা ম্যানেজ করা সহজ।
লোড টাইম অপ্টিমাইজেশন: Lazy Loading ব্যবহার করে প্রয়োজনীয় মডিউল লোড করা যায়।

Angular-এ NgModules অ্যাপ্লিকেশনকে সুসংগঠিত এবং ম্যানেজযোগ্য রাখে, যা ডেভেলপমেন্ট প্রক্রিয়াকে আরও সহজ এবং কার্যকর করে তোলে।

Content added By

SATT Academy

টেম্পলেট এবং ভিউ

659

Angular অ্যাপ্লিকেশনের ভিউ বা UI (User Interface) মূলত টেম্পলেট (Template) দ্বারা তৈরি হয়। টেম্পলেট হলো HTML কোডের একটি অংশ, যা কম্পোনেন্টের ডেটাকে UI হিসেবে উপস্থাপন করে। Angular এর টেম্পলেট ডাইনামিক এবং ইন্টারঅ্যাকটিভ উপায়ে ডেটা এবং লজিক ম্যানিপুলেট করতে সাহায্য করে।

টেম্পলেট কী?

টেম্পলেট হলো HTML এর একটি বিশেষ অংশ, যেখানে Angular এর ডেটা বাইন্ডিং এবং ডিরেক্টিভ ব্যবহৃত হয়। এটি Angular কম্পোনেন্টের UI বা ভিউ তৈরি করে। টেম্পলেটের মাধ্যমে আপনি ডাইনামিকভাবে ডেটা ডিসপ্লে করতে পারেন এবং ইউজারের ইনপুট গ্রহণ করতে পারেন।

টেম্পলেটের গঠন:

<h1>{{ title }}</h1>
<p>{{ description }}</p>
<button (click)="changeTitle()">Change Title</button>

এখানে:

{{ title }} হলো Interpolation (ডেটা বাইন্ডিং) যা title ভেরিয়েবল থেকে ডেটা নিয়ে কম্পোনেন্টের টেম্পলেটে দেখায়।
(click)="changeTitle()" হলো Event Binding, যা ব্যবহারকারীর ক্লিকের ইভেন্টকে হ্যান্ডল করে।

Angular টেম্পলেটে ব্যবহৃত সাধারণ ডেটা বাইন্ডিং পদ্ধতি

1. Interpolation ({{ }})

এটি কম্পোনেন্টের ডেটাকে HTML টেম্পলেটের মধ্যে সন্নিবেশিত করতে ব্যবহৃত হয়।
উদাহরণ:
```
<h1>{{ title }}</h1>
```
এখানে title কম্পোনেন্টের একটি প্রোপার্টি, যা HTML টেম্পলেটে দেখানো হচ্ছে।

2. Property Binding ([ ])

এটি টেম্পলেটের HTML প্রোপার্টিতে ডেটা বাইন্ডিং করতে ব্যবহৃত হয়।
উদাহরণ:
```
<img [src]="imageUrl">
```
এখানে [src] একটি প্রপার্টি বাইন্ডিং, যা imageUrl কম্পোনেন্টের প্রোপার্টি থেকে ডেটা গ্রহণ করে।

3. Event Binding (( ))

এটি ইউজারের ইভেন্ট (যেমন ক্লিক, কীবোর্ড ইনপুট ইত্যাদি) এর সাথে অ্যাকশনের সম্পর্ক স্থাপন করতে ব্যবহৃত হয়।
উদাহরণ:
```
<button (click)="onClick()">Click Me</button>
```
এখানে (click) হলো ইভেন্ট বাইন্ডিং, যা ইউজারের ক্লিক ইভেন্টকে কম্পোনেন্টের onClick() মেথডের সাথে যুক্ত করে।

4. Two-way Data Binding [( )]

এটি কম্পোনেন্টের প্রোপার্টি এবং ইউজারের ইনপুট একে অপরের সাথে সিঙ্ক্রোনাইজ করতে ব্যবহৃত হয়।
উদাহরণ:
```
<input [(ngModel)]="name">
```
এখানে [(ngModel)] হলো Two-way Binding, যা name প্রোপার্টির মান ইনপুট ফিল্ডের মাধ্যমে পরিবর্তন করে এবং ইনপুট ফিল্ডে যেকোনো পরিবর্তন হলে তা name প্রোপার্টিতে সিঙ্ক্রোনাইজ করে।

Angular ডিরেক্টিভ

ডিরেক্টিভ হলো Angular এর একটি বিশেষ ফিচার যা DOM-এর আচরণ পরিবর্তন করতে ব্যবহৃত হয়। টেম্পলেটে বিভিন্ন ধরণের ডিরেক্টিভ ব্যবহার করা হয়, যা HTML এলিমেন্টের আচরণ বা চেহারা পরিবর্তন করতে সাহায্য করে।

1. Structural Directives

Structural Directives DOM এ এলিমেন্ট যোগ বা সরানোর জন্য ব্যবহৃত হয়। এগুলি * দিয়ে শুরু হয়।
উদাহরণ:
- *ngIf: একটি এলিমেন্ট শো বা হাইড করতে।
- *ngFor: একটি লিস্ট বা অ্যারে থেকে আইটেমগুলোর উপর লুপ করতে।
```
<div *ngIf="isVisible">This content is visible</div>
<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>
```

2. Attribute Directives

Attribute Directives HTML এলিমেন্টের আচরণ পরিবর্তন করতে ব্যবহৃত হয়, কিন্তু DOM থেকে এলিমেন্টের আর্কিটেকচার পরিবর্তন করে না।
উদাহরণ:
- ngClass: একটি এলিমেন্টের ক্লাস অ্যাড বা রিমুভ করতে।
- ngStyle: একটি এলিমেন্টের স্টাইল পরিবর্তন করতে।
```
<div [ngClass]="{ 'highlight': isHighlighted }">Highlighted Text</div>
<div [ngStyle]="{ 'color': textColor }">Styled Text</div>
```

Angular টেম্পলেটের অন্যান্য গুরুত্বপূর্ণ বৈশিষ্ট্য

1. Pipes

Pipes ডেটাকে টেম্পলেটের মধ্যে ফরম্যাট করতে ব্যবহৃত হয়। উদাহরণস্বরূপ, তারিখ বা সংখ্যা ফরম্যাট করা।
উদাহরণ:
```
<p>{{ today | date }}</p>
<p>{{ price | currency }}</p>
```

2. Template Variables

Template Variables হলো টেম্পলেটের মধ্যে এমন ভেরিয়েবল, যা DOM উপাদানগুলোকে রেফারেন্স করতে ব্যবহৃত হয়।
উদাহরণ:
```
<input #myInput>
<button (click)="doSomething(myInput.value)">Click Me</button>
```

ভিউ এবং টেম্পলেটের মধ্যে সম্পর্ক

ভিউ হলো ব্যবহারকারীর সাথে ইন্টারঅ্যাক্ট করার জন্য দৃশ্যমান UI উপাদান। এটি টেম্পলেট দ্বারা তৈরি হয়।
টেম্পলেট HTML কোডের অংশ যা ডাইনামিকভাবে ডেটা প্রদর্শন করে এবং ব্যবহারকারী ইনপুট গ্রহণ করে। টেম্পলেটের ভিতরে Angular এর ডেটা বাইন্ডিং এবং ডিরেক্টিভ ব্যবহৃত হয়, যার মাধ্যমে ভিউটি ইন্টারঅ্যাকটিভ হয়।

Angular এর টেম্পলেট এবং ভিউ ব্যবহারের মাধ্যমে, আপনি আপনার অ্যাপ্লিকেশনকে ডাইনামিক এবং ইউজার-ফ্রেন্ডলি বানাতে পারেন।

Content added By

SATT Academy

ডিরেক্টিভস

627

Angular ডিরেক্টিভস হলো এমন স্পেশাল ক্লাস যা DOM (Document Object Model)-এর আচরণ বা স্ট্রাকচার পরিবর্তন করে। ডিরেক্টিভস কম্পোনেন্টের চেহারা এবং আচরণ নিয়ন্ত্রণ করতে ব্যবহৃত হয়। Angular-এ তিন ধরনের ডিরেক্টিভস ব্যবহৃত হয়: Structural Directives, Attribute Directives, এবং Custom Directives।

1. Structural Directives

Structural Directives DOM-এর স্ট্রাকচার পরিবর্তন করে, যেমন কোন এলিমেন্টকে যোগ করা, মুছে ফেলা বা দেখানো। এই ধরনের ডিরেক্টিভ সাধারণত * চিহ্ন দিয়ে শুরু হয়।

ngIf

*ngIf ডিরেক্টিভটি একটি HTML এলিমেন্টকে শর্তসাপেক্ষে DOM-এ অন্তর্ভুক্ত বা অন্তর্ভুক্ত না করার জন্য ব্যবহৃত হয়।
উদাহরণ:
```
<div *ngIf="isVisible">This content is visible</div>
```
এখানে isVisible যদি true হয়, তাহলে এলিমেন্টটি DOM-এ দেখানো হবে; যদি false হয়, তাহলে তা লুকানো হবে।

ngFor

*ngFor ডিরেক্টিভটি একটি লিস্ট বা অ্যারে ডেটাকে DOM-এ রিপিট করতে ব্যবহৃত হয়।
উদাহরণ:
```
<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>
```
এখানে items হলো অ্যারে বা লিস্ট, এবং এটি *ngFor দিয়ে প্রতিটি আইটেমের জন্য একটি li এলিমেন্ট তৈরি করবে।

ngSwitch

*ngSwitch ডিরেক্টিভটি একাধিক শর্ত পরীক্ষা করার জন্য ব্যবহৃত হয় এবং নির্দিষ্ট শর্তের ভিত্তিতে ভিন্ন ভিন্ন HTML এলিমেন্ট দেখানোর জন্য ব্যবহৃত হয়।
উদাহরণ:
```
<div [ngSwitch]="value">
  <p *ngSwitchCase="'a'">A</p>
  <p *ngSwitchCase="'b'">B</p>
  <p *ngSwitchDefault>Default</p>
</div>
```
এখানে value-এর মানের উপর ভিত্তি করে ভিন্ন ভিন্ন প্যারাগ্রাফ দেখানো হবে।

2. Attribute Directives

Attribute Directives কোনো HTML এলিমেন্টের আচরণ বা স্টাইল পরিবর্তন করে। এই ডিরেক্টিভগুলি এলিমেন্টের আচরণকে নিয়ন্ত্রণ করে এবং সাধারাণত HTML ট্যাগের অ্যাট্রিবিউট হিসেবে ব্যবহৃত হয়।

ngClass

ngClass ডিরেক্টিভটি এলিমেন্টের ক্লাস অ্যাট্রিবিউট পরিবর্তন করতে ব্যবহৃত হয়, যা এলিমেন্টের স্টাইল পরিবর্তন করে।
উদাহরণ:
```
<div [ngClass]="{ 'highlight': isHighlighted }">This is highlighted</div>
```
এখানে যদি isHighlighted true হয়, তাহলে highlight ক্লাসটি এই div এলিমেন্টে অ্যাড করা হবে, যা CSS এর মাধ্যমে স্টাইলিং করতে সাহায্য করবে।

ngStyle

ngStyle ডিরেক্টিভটি এলিমেন্টের ইনলাইন স্টাইল পরিবর্তন করতে ব্যবহৃত হয়।
উদাহরণ:
```
<div [ngStyle]="{ 'color': color, 'font-size': fontSize }">Styled text</div>
```
এখানে color এবং fontSize ডাইনামিকভাবে পরিবর্তিত স্টাইল নির্ধারণ করে।

ngModel

ngModel ডিরেক্টিভটি Two-Way Data Binding এর জন্য ব্যবহৃত হয়, যা UI এবং কম্পোনেন্টের ডেটা সিঙ্ক্রোনাইজ করে।
উদাহরণ:
```
<input [(ngModel)]="name">
```
এখানে name প্রোপার্টি ইনপুট ফিল্ডের মাধ্যমে দুই দিকেই (কম্পোনেন্ট থেকে UI এবং UI থেকে কম্পোনেন্টে) ডেটা সিঙ্ক্রোনাইজ করবে।

3. Custom Directives

Custom Directives তৈরি করে আপনি Angular-এ আপনার নিজস্ব ডিরেক্টিভ তৈরি করতে পারেন। এটি সাধারণত কোনো @Directive ডেকোরেটরের মাধ্যমে তৈরি করা হয়।

Custom Directive Example

import { Directive, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef, private renderer: Renderer2) {
    this.renderer.setStyle(this.el.nativeElement, 'background-color', 'yellow');
  }
}

এই ডিরেক্টিভটি একটি appHighlight নামে HTML অ্যাট্রিবিউট হিসেবে ব্যবহৃত হবে এবং এটি যেকোনো এলিমেন্টের ব্যাকগ্রাউন্ড কালার হলুদে পরিবর্তন করবে।

টেম্পলেটে ব্যবহার:

<p appHighlight>This paragraph has a yellow background.</p>

ডিরেক্টিভসের গুরুত্ব

UI লজিক আলাদা করা: ডিরেক্টিভস দ্বারা আপনি UI লজিককে কম্পোনেন্ট থেকে আলাদা করতে পারেন।
পুনঃব্যবহারযোগ্যতা: ডিরেক্টিভসকে পুনঃব্যবহারযোগ্য কোড হিসেবে তৈরি করা যায়, যা একাধিক কম্পোনেন্টে ব্যবহার করা যেতে পারে।
DOM ম্যানিপুলেশন সহজ: ডিরেক্টিভস ব্যবহার করে আপনি সহজে DOM ম্যানিপুলেট করতে পারেন।

Angular ডিরেক্টিভস DOM-এর আচরণ এবং চেহারা নিয়ন্ত্রণ করতে একটি শক্তিশালী টুল। এগুলো আপনাকে কোড পুনঃব্যবহারযোগ্য, পরিষ্কার এবং কমপ্যাক্ট রাখতে সাহায্য করে। Structural Directives DOM স্ট্রাকচার পরিবর্তন করে, Attribute Directives এলিমেন্টের আচরণ বা স্টাইল পরিবর্তন করে এবং Custom Directives আপনাকে আপনার নিজস্ব ডিরেক্টিভ তৈরি করার সুযোগ দেয়।

Content added By

SATT Academy

সার্ভিস এবং ডিপেন্ডেন্সি ইনজেকশন

589

Angular-এ সার্ভিস এবং ডিপেন্ডেন্সি ইনজেকশন (DI) অত্যন্ত গুরুত্বপূর্ণ ধারণা। Angular অ্যাপ্লিকেশন গঠনের জন্য বিভিন্ন কম্পোনেন্ট, ডিরেক্টিভ এবং সার্ভিসকে একটি মডুলার ও স্কেলেবল উপায়ে একে অপরের সাথে সংযুক্ত করা হয়। এখানে, সার্ভিস হলো সেই কোড যা কম্পোনেন্টের লজিক বা ডেটা ম্যানেজমেন্টের কাজ করে, আর ডিপেন্ডেন্সি ইনজেকশন হল Angular এর একটি ডিজাইন প্যাটার্ন যা সার্ভিস এবং অন্যান্য ডিপেন্ডেন্সি কম্পোনেন্টে ইনজেক্ট করতে ব্যবহৃত হয়।

সার্ভিস (Service)

সার্ভিস হলো একটি ক্লাস, যা সাধারণত একাধিক কম্পোনেন্ট বা অন্যান্য সার্ভিসের মধ্যে শেয়ারযোগ্য লজিক এবং ডেটা সরবরাহ করে। এটি সাধারণত Business Logic বা Data Access এর জন্য ব্যবহৃত হয়। Angular সার্ভিস ক্লাসগুলি একক ইন্সট্যান্সে (singleton) কাজ করে, যা সার্ভিসকে একাধিক কম্পোনেন্টে শেয়ার করার সুবিধা দেয়।

সার্ভিস তৈরি

সার্ভিস তৈরি করতে Angular CLI ব্যবহার করা হয়:

ng generate service user

উদাহরণ:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class UserService {

  constructor() { }

  getUserData() {
    return { name: 'John', age: 30 };
  }
}

এখানে, @Injectable ডেকোরেটরটি Angular-কে জানিয়ে দেয় যে এই ক্লাসটি একটি সার্ভিস এবং এটি ইনজেকশনের জন্য উপলব্ধ। providedIn: 'root' নির্দেশ করে যে সার্ভিসটি অ্যাপ্লিকেশন জুড়ে একটি একক ইন্সট্যান্স (singleton) হিসেবে ব্যবহৃত হবে।

ডিপেন্ডেন্সি ইনজেকশন (Dependency Injection)

ডিপেন্ডেন্সি ইনজেকশন (DI) হলো একটি ডিজাইন প্যাটার্ন, যা মাধ্যমে একটি অবজেক্ট তার ডিপেন্ডেন্সি (যেমন সার্ভিস, কনফিগারেশন, অন্যান্য অবজেক্ট) নিজে তৈরি না করে, বরং এগুলি অ্যাঙ্গুলার ইঞ্জেকশন মেকানিজম দ্বারা সরবরাহ করা হয়।

Angular একটি DI কন্টেইনার ব্যবহার করে যা একাধিক সার্ভিসের একক ইন্সট্যান্স তৈরি করে এবং তা বিভিন্ন কম্পোনেন্ট বা সার্ভিসে ইনজেক্ট করে। DI কোডকে আরও মডুলার, টেস্টেবল এবং পুনঃব্যবহারযোগ্য করে তোলে।

ডিপেন্ডেন্সি ইনজেকশন ব্যবহার

ধরা যাক, আপনি একটি UserService সার্ভিস কম্পোনেন্টে ইনজেক্ট করতে চান:

import { Component } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-root',
  template: `<h1>{{ user.name }}</h1>`
})
export class AppComponent {
  user: any;

  constructor(private userService: UserService) {
    this.user = this.userService.getUserData();
  }
}

এখানে, UserService কে AppComponent-এ ইনজেক্ট করা হয়েছে constructor এর মাধ্যমে। Angular নিজেই UserService কে তৈরি করে এবং কম্পোনেন্টে সরবরাহ করে।

DI এর কাজের প্রক্রিয়া

সার্ভিস তৈরি: প্রথমে, সার্ভিস তৈরি করতে হয়। সার্ভিসে ডেটা বা লজিক থাকে যা কম্পোনেন্ট বা অন্য সার্ভিসের জন্য প্রয়োজন হতে পারে।
সার্ভিসকে @Injectable ডেকোরেটরের মাধ্যমে মার্ক করা: Angular জানিয়ে দেয় যে এটি একটি ইনজেকশনযোগ্য ক্লাস।
ডিপেন্ডেন্সি ইনজেকশন কন্টেইনার: Angular অ্যাপ্লিকেশনে একটি DI কন্টেইনার রয়েছে যা ইনজেকশনের জন্য সার্ভিস বা ডিপেন্ডেন্সি প্রদান করে।
সার্ভিসকে ইনজেক্ট করা: আপনি যেখানেই এই সার্ভিসটি ব্যবহার করতে চান, সেখানে এটি ইনজেক্ট করা হয়, সাধারণত কম্পোনেন্টের কনস্ট্রাক্টরে।

বিভিন্ন ইনজেকশন স্কোপ

1. Root Scope

যদি একটি সার্ভিস providedIn: 'root' দ্বারা প্রোভাইড করা হয়, তাহলে এটি অ্যাপ্লিকেশন জুড়ে একক (singleton) সার্ভিস হিসেবে ব্যবহৃত হবে।

2. Module Scope

সার্ভিসকে একটি নির্দিষ্ট মডিউলে প্রোভাইড করতে চাইলে, providers অ্যারে ব্যবহার করা হয়।
উদাহরণ:
```
@NgModule({
  providers: [UserService]
})
export class UserModule { }
```

3. Component Scope

একটি কম্পোনেন্টে শুধুমাত্র সেই কম্পোনেন্টের জন্য সার্ভিস প্রোভাইড করা যেতে পারে।
উদাহরণ:
```
@Component({
  selector: 'app-user',
  providers: [UserService]
})
export class UserComponent {
  constructor(private userService: UserService) { }
}
```

সার্ভিস এবং DI এর সুবিধা

কোডের পুনঃব্যবহারযোগ্যতা: একবার তৈরি করা সার্ভিসটি একাধিক কম্পোনেন্টে ব্যবহৃত হতে পারে।
টেস্টিং সহজতর: সার্ভিস ইনজেকশন দ্বারা সহজেই মক সার্ভিস ব্যবহার করা সম্ভব, যা ইউনিট টেস্টিংকে সহজ করে তোলে।
কোড মডুলারিটি: সার্ভিস এবং কম্পোনেন্ট একে অপর থেকে বিচ্ছিন্ন থাকে, ফলে কোড বেশি পরিষ্কার ও মডুলার হয়।
সেন্ট্রালাইজড ডেটা ম্যানেজমেন্ট: সার্ভিসের মাধ্যমে ডেটা এক জায়গায় ম্যানেজ করা সম্ভব, যা অ্যাপ্লিকেশনকে আরও সুসংগঠিত এবং পরিচালনাযোগ্য করে তোলে।

সার্ভিস এবং DI এর উদাহরণ

উদাহরণ 1: সার্ভিস ইনজেকশন

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ProductService {
  getProducts() {
    return ['Product 1', 'Product 2', 'Product 3'];
  }
}

@Component({
  selector: 'app-product',
  template: `<ul><li *ngFor="let product of products">{{ product }}</li></ul>`
})
export class ProductComponent {
  products: string[];

  constructor(private productService: ProductService) {
    this.products = this.productService.getProducts();
  }
}

এখানে ProductService সার্ভিসটি ProductComponent-এ ইনজেক্ট করা হয়েছে, এবং getProducts() মেথডের মাধ্যমে ডেটা প্রাপ্তি হচ্ছে।

সারাংশ:
Angular-এ সার্ভিস এবং ডিপেন্ডেন্সি ইনজেকশন অ্যাপ্লিকেশন ডেভেলপমেন্টকে মডুলার, পুনঃব্যবহারযোগ্য এবং টেস্টযোগ্য করে তোলে। সার্ভিস কম্পোনেন্টে ইনজেক্ট করা হয় এবং তা ডেটা এবং লজিক সরবরাহ করে। ডিপেন্ডেন্সি ইনজেকশন দ্বারা ডিপেন্ডেন্সি কম্পোনেন্ট বা সার্ভিসের মধ্যে সরবরাহ করা হয়, যা কোডের পরিষ্কারতা এবং পরিচালনক্ষমতা বৃদ্ধি করে।

Content added By

SATT Academy

রাউটিং এবং নেভিগেশন

711

Angular অ্যাপ্লিকেশন গুলোর মধ্যে রাউটিং এবং নেভিগেশন অত্যন্ত গুরুত্বপূর্ণ অংশ। রাউটিং হলো একটি অ্যাপ্লিকেশন ব্যবহারকারীর জন্য ভিন্ন ভিন্ন পেজ বা ভিউতে নেভিগেট করার পদ্ধতি। Angular-এ Router ব্যবহার করে এক পেজ থেকে অন্য পেজে যাওয়া এবং ব্যবহারকারীর চাহিদা অনুযায়ী UI পরিবর্তন করা হয়। এটি Single Page Application (SPA) তৈরি করতে সাহায্য করে, যেখানে পুরো পেজ রিফ্রেশ না হয়ে কেবলমাত্র প্রয়োজনীয় অংশ পরিবর্তিত হয়।

রাউটিং কী?

রাউটিং হলো একটি সিস্টেম যা ব্যবহারকারীকে বিভিন্ন URL বা পেজের মধ্যে নেভিগেট করতে সাহায্য করে। Angular অ্যাপ্লিকেশনে রাউটিং ব্যবহার করে URL অনুযায়ী নির্দিষ্ট কম্পোনেন্ট লোড করা হয়। রাউটার অ্যাপ্লিকেশনটি "একক পেজ অ্যাপ্লিকেশন" হিসেবে কাজ করতে সক্ষম করে, যেখানে পেজ লোড করার সময় সম্পূর্ণ নতুন পেজ লোড না হয়ে শুধুমাত্র সংশ্লিষ্ট অংশ রেন্ডার করা হয়।

Angular রাউটিং কনফিগারেশন

Angular-এ রাউটিং কনফিগার করতে হয় RouterModule ব্যবহার করে। AppRoutingModule একটি মডিউল হিসেবে রাউটিং কনফিগার করে এবং এই মডিউলটিকে মূল অ্যাপ মডিউলে (AppModule) অন্তর্ভুক্ত করা হয়।

রাউটিং কনফিগারেশন

রাউটিং কনফিগার করার জন্য প্রথমে অ্যাপ্লিকেশনকে একটি রাউটিং মডিউল তৈরি করতে হয়। CLI ব্যবহার করে এই মডিউলটি তৈরি করা যেতে পারে:

ng generate module app-routing --flat --module=app

এখানে, app-routing.module.ts ফাইলে রাউটিং কনফিগারেশন লিখতে হবে। উদাহরণস্বরূপ:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { NotFoundComponent } from './not-found/not-found.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: '**', component: NotFoundComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

এখানে:

path: '' ডিফল্ট রুট হিসেবে ব্যবহৃত হয়, যেটি সাধারণত হোম পেজ বা মূল পেজ হিসেবে কাজ করে।
path: 'about' হলো /about URL এর জন্য রাউট, যা AboutComponent কে লোড করবে।
path: '**' ব্যবহার করা হয় কোন অজানা রুটের জন্য, যা সাধারণত 404 পেজ বা Not Found পেজের জন্য ব্যবহৃত হয়।

রাউটিং সক্রিয় করা

AppRoutingModule মডিউলটি অ্যাপের মূল মডিউল AppModule-এ অন্তর্ভুক্ত করতে হয়:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

এখানে, AppRoutingModule কে imports অ্যারে তে যুক্ত করা হয়েছে, যা অ্যাপ্লিকেশনটি রাউটিং ব্যবস্থাপনার জন্য প্রস্তুত করে।

রাউটিং নেভিগেশন

রাউটিং কনফিগার করার পর, বিভিন্ন কম্পোনেন্ট বা HTML টেমপলেটে ব্যবহারকারীকে রাউট করতে হবে। Angular বিভিন্নভাবে রাউটিং এবং নেভিগেশন সাপোর্ট করে।

1. RouterLink

Angular-এ RouterLink ডিরেক্টিভ ব্যবহার করে কোনো নির্দিষ্ট রুটে নেভিগেট করা হয়। এটি একটি উপযুক্ত URL তৈরি করে যেটি ব্যবহারকারী ক্লিক করলে নির্দিষ্ট রুটে নিয়ে যাবে।

উদাহরণ:

<a routerLink="/about">About</a>

এখানে, routerLink="/about" ব্যবহারকারীর ক্লিক করার মাধ্যমে /about রুটে নেভিগেট করবে।

2. Router.navigate()

কম্পোনেন্টের ভিতরেও রাউটিং করা যায়, যেখানে Angular এর Router ক্লাস ব্যবহার করে প্রোগ্রাম্যাটিক্যালি নেভিগেট করা হয়। উদাহরণ:

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  template: `<button (click)="goToAbout()">Go to About</button>`
})
export class AppComponent {

  constructor(private router: Router) {}

  goToAbout() {
    this.router.navigate(['/about']);
  }
}

এখানে, this.router.navigate(['/about']) ব্যবহৃত হয়েছে, যাতে ব্যবহারকারী ক্লিক করলে /about রুটে নেভিগেট করা হয়।

রাউটার আউটলেট (Router Outlet)

রাউটিং ব্যবস্থাপনা করার জন্য আপনাকে অ্যাপ্লিকেশনের টেমপলেটে <router-outlet> ট্যাগ ব্যবহার করতে হবে, যেখানে নির্দিষ্ট রুটের কম্পোনেন্ট রেন্ডার হবে।

<router-outlet></router-outlet>

এটি একটি বিশেষ ট্যাগ যা Angular রাউটার দ্বারা রেন্ডারিং কম্পোনেন্টের জন্য ব্যবহৃত হয়।

রাউটিং প্রটেকশন

Angular রাউটিং সিস্টেম ব্যবহার করে নির্দিষ্ট রুটে নেভিগেশন প্রোটেক্ট করা যায়। উদাহরণস্বরূপ, লগইন বা অথরাইজেশন চেক করার জন্য গার্ড ব্যবহার করা যেতে পারে। গার্ডস মূলত রাউটিংয়ের আগে কিছু শর্ত চেক করে।

রাউট গার্ড উদাহরণ:

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private router: Router) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    const isAuthenticated = false; // এখানে প্রপার লগিন চেক করতে হবে
    if (!isAuthenticated) {
      this.router.navigate(['/login']);
      return false;
    }
    return true;
  }
}

এখানে AuthGuard ক্লাসটি /login রুটে নেভিগেট করবে যদি ব্যবহারকারী অথরাইজড না থাকে।

সারাংশ

Angular রাউটিং একটি গুরুত্বপূর্ণ ফিচার যা ব্যবহারকারীর অ্যাপ্লিকেশনের বিভিন্ন অংশে সহজেই নেভিগেট করতে সাহায্য করে। এটি একাধিক ভিউ বা পেজের মধ্যে সহজে টগল করার জন্য ব্যবহৃত হয় এবং সিঙ্গেল পেজ অ্যাপ্লিকেশন তৈরি করতে সহায়ক। RouterLink, Router.navigate(), এবং Router Outlet এর মাধ্যমে Angular অ্যাপ্লিকেশনে নেভিগেশন কার্যকর করা হয়।

Content added By

SATT Academy

Angular পরিচিতি Angular কম্পোনেন্টস Angular মডিউলস টেম্পলেট এবং ডিরেক্টিভস Angular পাইপস